<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>游客信息添加</title>
</head>
<h1>添加游客信息</h1>
<body>
	<form action="TouristServlet?method=touristInsertSave" method="post">
		<table>
			<tr>
				<td>游客姓名</td>
				<td><input type="text" id="name" name="name" required="required" ></td>
			</tr>
			<tr>
				<td>性别</td>
				<td><input type="radio"  name="sex" value="男" checked="checked">男
					<input type="radio"  name="sex" value="女">女</td>
			</tr>
			<tr>
				<td>年龄</td>
				<td><input type="number" id="age" name="age" min="1" max="99" ></td>
			</tr>
			<tr>
				<td>身份证号码</td>
				<td><input type="text" id="id_number" name="id_number" Maxlength="18" required="required" ></td>
			</tr>
			<tr>
				<td>手机号码</td>
				<td><input type="text" id="phone_number" name="phone_number" Maxlength="11" ></td>
			</tr>
			<tr>
				<td>创建日期</td>
				<td><input type="datetime-local" id="created_time" name="created_time" ></td>
			</tr>
		</table>
		<input type="submit" id="submit" name="submit" value="提交">
		<input type = "button" onclick="history.back();" value = "返回" />
	</form>
	<script src="js/jquery-3.4.1.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){
		$("#age").change(function(){
			if($("#age").val()>99){
				$("#age").val("99");
			}
		})
		
		$("#id_number").change(function(){
			getAgeById_Number();
		});

	});
	function getAgeById_Number(){
		var myDate = new Date(); 
		var age = myDate.getFullYear()-$("#id_number").val().substring(6, 10);
		$("#age").val(age);
	}
	</script>
</body>
</html>